<template>
	<view>
		<view class="footer">
			<view class="footer-g" v-show="tab01=='1'" @click="toDo(4)">
				<view class="active">

					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//home1.png"></image>
					<view class="active-02">充电中</view>
				</view>
			</view>
			
			<view class="footer-g" v-show="tab01!='1'" @click="toDo(1)">
				<view class="no-active">
					<view class="no-active-01">

						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//home.png"></image>
						<view class="no-active-02">充电中</view>
					</view>
				</view>
			</view>

			<view class="zfooter-g" v-show="tab01=='2'" @click="toDo(5)">
				<view class="active">

					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//hm1.png"></image>
					<view class="active-02">首页</view>
				</view>
			</view>
			<view class="zfooter-g" v-show="tab01!='2'" @click="toDo(2)">

				<view class="no-active">
					<view class="no-active-01">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//hm.png"></image>
						<view class="no-active-02">首页</view>
					</view>

				</view>
			</view>

			<view class="footer-g" v-show="tab01=='3'" @click="toDo(6)">
				<view class="active">
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//hmz1.png"></image>
					<view class="active-02">个人中心</view>
				</view>
			</view>
			
			<view class="footer-g" v-show="tab01!='3'" @click="toDo(3)">
				<view class="no-active">
					<view class="no-active-01">

						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//hmz.png"></image>
						<view class="no-active-02">个人中心</view>
					</view>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},

		props: {
			tab01: String
		},
		methods: {
			toDo(e) {
				switch (e) {
					case 1:
						uni.reLaunch({
							url: '/pages/chargingzhong/chargingzhong'
						})
				
						break;
					case 2:
				
						uni.reLaunch({
							url: '/pages/smcharging/smcharging'
						})
						break;
					case 3:
						uni.reLaunch({
							url: '/pages/index/index'
						})
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.footer {
		text-size-adjust: 100% !important;
		-webkit-text-size-adjust: 100% !important;
		-moz-text-size-adjust: 100% !important;
		width: 100%;
		height: 98upx;
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		// background: url('https://qiniu.jxyutuo.com/yanqin/tabBarimg//tabBarbg.png') no-repeat;
		background-color: #3A4044;
		background-size: cover;
		justify-content: space-between;
		text-align: center;
		font-size: 24upx;
		font-family: PingFang SC Medium, PingFang SC Medium-Medium;
		font-weight: 500;
		color: #7A837C;
		margin-top: 140upx;

		.footer-g {
			width: 33.33333%;
			box-sizing: border-box;
			padding-top: 14upx;

			.active {
				color: #9CD52C;

				image {
					width: 35upx;
					height: 41upx;
					margin-bottom: 4upx;
				}
			}

			.no-active {
				.no-active-01 {
					image {
						width: 35upx;
						height: 41upx;
						margin-bottom: 4upx;
					}
				}
			}
		}

		.zfooter-g {
			width: 33.33333%;
			box-sizing: border-box;
			padding-top: 14upx;

			.active {
				color: #9CD52C;

				image {
					width: 35upx;
					height: 41upx;
					margin-bottom: 4upx;
				}
			}

			.no-active {
				.no-active-01 {
					image {
						width: 35upx;
						height: 41upx;
						margin-bottom: 4upx;
					}
				}
			}
		}
	}
</style>